<template>

  <div style="margin-left: 20px;">
    <!--按钮功能区-->
      <div style="margin: 20px 0">
        <el-button size="mini"  type="primary" @click="handleAdd()">新增</el-button>
        <el-button size="mini"  type="primary">导入</el-button>
        <el-button size="mini"  type="primary">导出</el-button>
      </div>
      <div  style="margin: 20px  0">
        <el-input size="mini" v-model="search" clearable placeholder="请输入内容" style="width: 300px;margin-right: 10px;"></el-input>
        <el-button type="primary" size="mini"  @click="handleDataList()">搜索</el-button>
      </div>

      <!--table区-->
      <div style="margin-right:50px">
        <el-table :data="tableData" style="width: 100%;" border>
          <el-table-column prop="userName" label="姓名" width="180" />
          <el-table-column prop="password" label="密码"/>
          <el-table-column prop="nickName" label="昵称"/>
          <el-table-column prop="phone" label="电话"/>
          <el-table-column prop="address" label="地址" />
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
              <el-popconfirm title="确定删除吗"
                             confirmButtonText="确定"
                             cancelButtonText="取消"
                             :icon="InfoFilled"
                             icon-color="red"
                             @confirm="handleDel(scope.$index,scope.row)">
                  <template #reference>
                      <el-button size="mini">删除</el-button>
                  </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

    <!--分页-->
      <div style="margin-left: 20px">

        <el-pagination
              v-model:currentPage="currentPage"
              :page-sizes="[5]"
              :page-size="currentSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
        </el-pagination>

      </div>


      <div>
        <el-dialog v-model="dialogFormVisible" title="表单">
          <el-form :model="form">
              <el-form-item label="用户名">
                  <el-input v-model="form.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                  <el-input v-model="form.password"></el-input>
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="form.nickName"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="addConfirm()">Confirm</el-button>
              </span>
          </template>
        </el-dialog>
      </div>

  </div>

</template>
<script>
    import request from "../utils/request";
    import { ElMessage } from 'element-plus'

    export default{
      name:'Home',
      components:{
      },
      data() {
        return {
            //变量search
          search:"",
            //表单
          form:{},
          //默认隐藏对话框
          dialogFormVisible:false,
          //变量：当前页
          currentPage:1,
          //每页多少条
          currentSize:5,
          //变量：总记录数
          total:0,
          //-----数据集合---------------
          tableData: [],
          //--------------------------


        }
      },

      //-----
      created(){
        this.handleDataList()
      },

      //方法
      methods: {
        handleAdd(){
          //显示对话框
          this.dialogFormVisible=true
        },
        //添加
        addConfirm(){
            request.post("/api/user/userAdd",this.form).then(res=>{
              if(res.status =='M0200'){
                //提示
                ElMessage({
                  message:"添加成功",
                  type:"success"
                })
              }else{
                ElMessage({
                  message:"添加失败:"+res.msg,
                  type:"error"
                })
              }
              //关闭弹出
              this.dialogFormVisible=false,
              //加载列表
              this.handleDataList()
            })
        },

          handleDel(index,item){
              request.post("/api/user/userDel",item).then(res=>{
                  if(res.status =='M0200'){
                      //提示
                      ElMessage({
                          message:"删除成功",
                          type:"success"
                      })
                  }else{
                      ElMessage({
                          message:"删除失败:"+res.msg,
                          type:"error"
                      })
                  }
                  this.handleDataList()
              })
          },
        //查询
        handleDataList(){
          request.get("/api/user/getUserInfo",{
              params:{
                  currentPage:this.currentPage,
                  currentSize:this.currentSize,
                  search:this.search
              }
          }).then(res=>{
            this.tableData=res.data.list;
            this.total = res.data.total;

          })
        },

        handleCurrentChange(v){
            this.currentPage=v
            this.handleDataList()
        },
        handleSizeChange(v){
            this.currentSize=v
            this.handleDataList()
        },
        handleEdit(){

        }


      }
    }
</script>

<style>
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
  }
</style>
